<template>
  <header class="head">
      
      <div class="head-right">
          <div class="head-input">
              <div class="head-label">厂商ID：</div>
              <el-input @keyup.enter="searchTable" @clear="searchTable" clearable v-model="search.ServiceID" placeholder="请输入关键字搜索">
                  <template #append>
                      <el-button icon="el-icon-search" @click="searchTable"></el-button>
                  </template>
              </el-input>
          </div>
      </div>
      <el-button type="primary" @click="goEdit">新建</el-button>
  </header>
  <section>
      <ele-table :tableTitleData="tableTitleData" :tableData="tableData" :loading="loading" :pageObj="pageObj" @onchangepage="changePage" >
        <template #Agents="scope">
          {{scope.soltval.Agents ? scope.soltval.Agents.length : '0'}}
        </template>
        <template #Status="scope">正常</template>
        <template  #all="scope" >
          <span @click="goEdit(scope.soltval)" class="link">查看详情</span>
          <span @click="delEdit(scope.soltval)" class="link">删除厂商</span>
        </template>
      </ele-table>


  </section>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, getCurrentInstance,onActivated } from "vue";
import eleTable from '@/components/ele-table/index.vue';
import { useRouter } from "vue-router"

export default defineComponent({
  name: 'Manufacturer',
  components:{
      eleTable
  },
  setup(){
  const instance: any = getCurrentInstance();
  const GL = instance.appContext.config.globalProperties;
  const router = useRouter()  
  const search = reactive({
    ServiceID:'',
  })
  const loading = ref(true);
  const allInfo: any = ref({})
  const pageObj = ref({page:1,size:10,total:0})
  const tableTitleData = ref([
    { label: '厂商ID', prop: 'ServiceID' },
    { label: '厂商密码', prop: 'Passwd' },
    { label: 'Ngix代理IP', prop: 'AgentUrl' },
    { label: '代理节点数量',align:'center', slotname: 'Agents' },
    { label: '厂商状态',align:'center', slotname: 'Status' },
    { label: '操作',align:'center', slotname: 'all' }
  ])
  const tableData = ref([
    { node_id: 1, password: "123456", node_address: 'EF89CS1115,102', max_viewing_number: '1024', stream_mode: '正常'},
  ])
  const changePage = (val) =>{
    console.log(val)
  };
  const searchTable = () => {
    initData()
  };
  const goEdit = (e) => {
    sessionStorage.setItem('increment', JSON.stringify(allInfo.value))
    GL.$store.commit('increment', allInfo.value)
    if(e.ServiceID) {
      router.push({
        path: '/manufacturer-detail',
        query: {ServiceID: e.ServiceID}
      })
    } else {
      router.push({
        path: '/manufacturer-detail',
      })
    }
  }
  const delEdit = (e) => {
    let data: any = []
    allInfo.value.Services.forEach(item => {
      if(item.ServiceID === e.ServiceID) {
        item.Type = 0
        data.push(item)
      }
    })
    const {Base, Users}=allInfo.value
    Users[0].type = 0
    
    GL.$confirm('此操作将永久删除该厂商, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      await GL.$axios.post(GL.$api.video.ModifyConfig, {Services: data}).then(res => {
        GL.$message({
          type: 'success',
          message: '删除成功!'
        });
        searchTable()
      })
    }).catch(() => {
      GL.$message({
        type: 'info',
        message: '已取消删除'
      });          
    });
  }
 const initData = () => {
    loading.value = true;
    GL.$axios.get(GL.$api.video.QueryConfig, {params: {Type: 0,ServiceID:search.ServiceID}})
      .then((res: any) => {
        if(res.Code === 0) {
          allInfo.value = res
          tableData.value = res.Services
          loading.value = false;
        }
      })
      .catch((err: any) => {
        tableData.value = []
        loading.value = false;
      });
  } 
  onActivated(() => {
    searchTable()
  })
  return{
    search,
    loading,
    pageObj,
    tableTitleData,
    tableData,
    searchTable,
    changePage,
    goEdit,
    delEdit
  }
}
})
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>
